<template>
  <div>
    <el-dialog
      :title="getDesignName((form.formDesignId || {}).id) + '-' + form.title"
      :visible="visible"
      width="60%"
      @close="visible = false"
      :close-on-click-modal="false"
    >
      <el-card v-if="form.workflowStatus != 0" shadow="never">
        <el-form
          :model="form"
          :rules="rules"
          ref="form"
          label-width="0px"
          class="demo-form"
          label-position="top"
          size="mini"
          v-loading="loading"
        >
          <el-form-item label="" prop="title">
            <controlPanel ref="controlPanel" :isEdit="isEdit"></controlPanel>
          </el-form-item>
        </el-form>
      </el-card>

      <el-card
        v-if="form.workflowStatus != 0"
        shadow="never"
        class="card-provehistory"
        style="margin-top: 10px"
      >
        <div slot="header">审批记录</div>
        <el-card
          shadow="never"
          style="margin-top: 10px"
          v-for="item in workHistories"
          :key="item.id"
        >
          <div slot="header">
            <span
              ><span class="historylabel">节点：</span>{{ item.nodeName }}</span
            >
            <div style="float: right; padding: 3px 0">
              <span v-if="item.workStepType == 0">
                <span v-if="item.isHandled" :underline="false" type="success">
                  <span>
                    <el-link
                      :underline="false"
                      v-if="item.handleType == 0"
                      type="success"
                      >通过</el-link
                    >
                    <el-link
                      :underline="false"
                      v-if="item.handleType == 1"
                      type="danger"
                      >拒绝</el-link
                    >
                    <el-link
                      :underline="false"
                      v-if="item.handleType == 2"
                      type="info"
                      >撤回</el-link
                    >
                    <el-link
                      :underline="false"
                      v-if="item.handleType == 3"
                      type="warning"
                      >转发</el-link
                    >
                    <el-link :underline="false" v-if="item.handleType == 4"
                      >未处理</el-link
                    >
                  </span>
                </span>
                <el-link v-else :underline="false" type="info">待处理</el-link>
              </span>
              <span v-else>
                <el-link :underline="false" type="info">只读</el-link>
              </span>
            </div>
          </div>
          <div>
            <span class="historylabel">处理人：</span>
            {{ item.handleUser.name }}
          </div>
          <div>
            <p class="historylabel">意见：</p>
            {{ item.comment }}
          </div>
          <div>
            <p class="historylabel">附件:</p>
            {{ item.resourceIds }}
          </div>
          <br />
          <div class="bottom clearfix">
            <time v-if="item.isHandled" class="time">
              <span class="historylabel">处理时间：</span
              >{{ item.handlerTime }}</time
            >
          </div>
        </el-card>
      </el-card>

      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="confirm" size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import controlPanel from "@/views/workflows/formDesign/controlPanel.vue";
export default {
  components: { controlPanel },
  props: {
    value: {
      id: 1,
    },
  },
  watch: {
    value: {
      handler() {
        //this.load();
      },
      deep: true,
    },
    visible(newVal, oldVal) {
      if (!newVal && oldVal) this.hide();
    },
    "form.formDesignId.id": {
      handler(newVal, oldVal) {
        if (newVal == oldVal) return;
        var selected = this.selections.filter(
          (s) => s.id == this.form.formDesignId.id
        )[0];
        if (!selected) return;
        var formDesignId = {
          id: selected.id,
          version: selected.activeVersion,
        };
        this.getDesign(formDesignId);
      },
    },
  },
  model: {
    prop: "value",
    event: "change",
  },
  data() {
    return {
      loading: false,
      visible: false,
      form: {
        name: "",
        formDesignId: {},
      },
      controls: [],
      selections: [],
      rules: {
        // title: [{ required: true, message: "请输入", trigger: "change" }],
        // designId: [{ required: true, message: "请选择", trigger: "change" }],
      },
      isEdit: false,
      workHistories: [],
    };
  },
  methods: {
    confirm() {
      this.commit();
    },
    show(value) {
      this.visible = true;
      this.getAllFormDesignVersions();
      if (value) this.loadData(value);
    },
    hide() {
      this.visible = false;
      this.form = {
        name: "",
        formDesignId: {},
        formData: {},
      };
    },
    loadData(value) {
      this.loading = true;
      this.$store
        .dispatch("dynamicFormInstance/get", { id: value })
        .then((res) => {
          this.form = res;
          this.getAllTaskStepsOfWorkTaskByEntityInfo();
          this.getDesign(this.form.formDesignId).then((controls) => {
            this.loading = false;
            //this.$set(this.form, "formData", JSON.parse(res.formData || "{}"));
            this.$refs.controlPanel.setValue(
              controls,
              JSON.parse(res.formData || "{}")
            );
          });
        });
    },
    commit() {
      this.$emit("ok-click", {});
      this.hide();
    },
    getAllFormDesignVersions(formDesignId) {
      return this.$store
        .dispatch("dynamicFormDesign/getAllList", {
          formDesignId: formDesignId,
        })
        .then((res) => {
          this.selections = res;
        });
    },
    getDesign(id) {
      return this.$store
        .dispatch("dynamicFormDesign/getFormDesignVersion", id)
        .then((res) => {
          if (res && res.designContent)
            return JSON.parse(res && res.designContent);
          else return [];
        });
    },
    getDesignName(designId) {
      var designs = this.selections.filter((s) => s.id == designId);
      return designs && designs.length > 0 ? designs[0].title : "";
    },
    getAllTaskStepsOfWorkTaskByEntityInfo() {
      this.$store
        .dispatch("workflow/getAllTaskStepsOfWorkTaskByEntityInfo", {
          entityFullName: "DynamicForm.Core.FormInstance",
          entityKeyValue: this.form.id,
        })
        .then((res) => {
          this.workHistories = res;
          this.loading = false;
        })
        .catch((e) => {
          this.loading = false;
        });
    },
  },
};
</script>

<style>
.card-provehistory .historylabel {
  color: #999999;
}
</style>
